<style lang="scss">
  .services {
    .el-main {
      padding: 0px 16px 16px 16px;
    }
    .el-tabs {
      width: 100%;
      .el-tabs__header {
        margin: 16px 16px 12px 16px;
        .el-tabs__item.is-active {
          border-bottom: 2px solid #409eff;
        }
      }
    }
  }
</style>

<template>
  <el-container class="services">
    <!-- 状态导航 -->
    <el-tabs v-model="activeTabState"
             type="card"
             @tab-click="tabClick">
      <el-tab-pane name="111">
        <span slot="label">
          <i class="el-icon-edit-outline"></i> 已下发
        </span>
        <service-issue ref="serviceIssue"></service-issue>
      </el-tab-pane>
      <el-tab-pane name="000">
        <span slot="label">
          <i class="el-icon-document"></i> 待下发
        </span>
        <ToBeIssued ref="ToBeIssued"></ToBeIssued>
      </el-tab-pane>
      <el-tab-pane name="222">
        <span slot="label">
          <i class="el-icon-bell"></i> 今日预警
        </span>
        <service-warning ref="serviceWarning"></service-warning>
      </el-tab-pane>
      <el-tab-pane name="333">
        <span slot="label">
          <i class="el-icon-date"></i> 超期件
        </span>
        <service-overdue ref="serviceOverdue"></service-overdue>
      </el-tab-pane>
      <!-- <el-tab-pane name="444">
        <span slot="label"><i class="el-icon-news"></i> 延期确认</span>
        <service-delay ref="serviceDelay"></service-delay>
      </el-tab-pane>-->
      <el-tab-pane name="555">
        <span slot="label">
          <i class="el-icon-zoom-out"></i> 退回
        </span>
        <service-back ref="serviceBack"></service-back>
      </el-tab-pane>
      <el-tab-pane name="666">
        <span slot="label">
          <i class="el-icon-edit"></i> 待办理
        </span>
        <service-already ref="serviceAlready"></service-already>
      </el-tab-pane>
      <el-tab-pane name="777">
        <span slot="label">
          <i class="el-icon-finished"></i> 已办理
        </span>
        <service-close ref="serviceClose"></service-close>
      </el-tab-pane>
    </el-tabs>
  </el-container>
</template>

<script>
  import ToBeIssued from './to_be_issued.vue';//待下单
  import serviceIssue from './service-issue.vue'//已下单
  import serviceWarning from './service-warning.vue'//今天预警
  import serviceOverdue from './service-overdue.vue'//超期件
  import serviceDelay from './service-delay.vue'
  import serviceBack from './service-back.vue'//退回件
  import serviceAlready from './service-already.vue'//待办理
  import serviceClose from './service-close.vue'//已办理

  export default {
    data () {
      return {
        activeTabState: '111'
      }
    },
    methods: {
      // tab 点击
      tabClick (tab, event) {
        switch (tab.name) {
          case '000':
            this.$refs.ToBeIssued.fatherMethod()
            break
          case '111':
            this.$refs.serviceIssue.doSearch()
            break
          case '222':
            this.$refs.serviceWarning.initFn()
            break
          case '333':
            this.$refs.serviceOverdue.initFn()
            break
          // case '444':
          //   this.$refs.serviceDelay.initFn()
          //   break
          case '555':
            this.$refs.serviceBack.initFn()
            break
          case '666':
            this.$refs.serviceAlready.initFn()
            break
          case '777':
            this.$refs.serviceClose.initFn()
            break
        }
      }
    },
    components: {
      ToBeIssued,
      serviceIssue,
      serviceWarning,
      serviceOverdue,
      serviceDelay,
      serviceBack,
      serviceAlready,
      serviceClose
    }
  }
</script>
